<template>
  <div class="app-container">
    <!-- 顶部区域：楼层切换 + 操作按钮 -->
    <div class="page-header">
      <div class="floor-tabs">
        <el-button
          v-for="floor in floorList"
          :key="floor.id"
          class="floor-tab"
          :class="{
            active: activeFloor === floor.id,
            'red-dot': floor.hasAlarm,
          }"
          @click="handleFloorChange(floor.id)"
          @mouseenter="() => (floor.showActions = true)"
          @mouseleave="() => (floor.showActions = false)"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 16px;
          "
        >
          {{ floor.floorName }}
          <!-- 悬停显示的操作按钮（编辑/删除） -->
          <div class="floor-action-btns" v-show="floor.showActions">
            <el-button
              size="mini"
              plain
              @click.stop="handleEditFloor(floor)"
              style="margin-right: 4px"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              :disabled="floor.hasRooms"
              @click.stop="handleDeleteFloorDirect(floor)"
            >
              删除
            </el-button>
          </div>
        </el-button>
      </div>
      <div class="header-actions">
        <el-button type="primary" size="small" @click="handleAddFloor"
          >新增楼层</el-button
        >
        <el-button type="primary" size="small" @click="handleAddRoomGlobal"
          >新增房间</el-button
        >
      </div>
    </div>
    <!-- 状态图例 -->
    <div class="status-legend">
      <div class="legend-item">
        <svg
          class="bed-svg svg-free"
          viewBox="0 0 64 64"
          fill="currentColor"
          aria-hidden="true"
        >
          <circle cx="18" cy="18" r="6" />
          <rect x="8" y="24" width="48" height="10" rx="2" />
          <rect x="8" y="34" width="48" height="12" rx="2" />
          <rect x="8" y="46" width="4" height="10" />
          <rect x="52" y="46" width="4" height="10" />
        </svg>
        <span>空闲</span>
      </div>
      <div class="legend-item">
        <svg
          class="bed-svg svg-occupied"
          viewBox="0 0 64 64"
          fill="currentColor"
          aria-hidden="true"
        >
          <circle cx="18" cy="18" r="6" />
          <rect x="8" y="24" width="48" height="10" rx="2" />
          <rect x="8" y="34" width="48" height="12" rx="2" />
          <rect x="8" y="46" width="4" height="10" />
          <rect x="52" y="46" width="4" height="10" />
        </svg>
        <span>已入住</span>
      </div>
      <div class="legend-item">
        <svg
          class="bed-svg svg-leave"
          viewBox="0 0 64 64"
          fill="currentColor"
          aria-hidden="true"
        >
          <circle cx="18" cy="18" r="6" />
          <rect x="8" y="24" width="48" height="10" rx="2" />
          <rect x="8" y="34" width="48" height="12" rx="2" />
          <rect x="8" y="46" width="4" height="10" />
          <rect x="52" y="46" width="4" height="10" />
        </svg>
        <span>请假中</span>
      </div>
    </div>
    <!-- 房间卡片 -->
    <div class="room-grid">
      <div
        v-for="room in filteredRooms"
        :key="room.id"
        class="room-card"
        :class="{ 'deleted-room': room.isDeleted === 1 }"
      >
        <div class="room-header">
          <div class="room-info">
            <!-- 修改：将已满标签放在房间号右边 -->
            <div class="room-number-wrapper">
              <div class="room-number">房间号：{{ room.roomNo }}</div>
              <div
                v-if="isBedLimitReached(room)"
                class="room-full-tag"
                title="床位数量已达上限"
              >
                已满
              </div>
              <!-- 新增删除标记 -->
              <div v-if="room.isDeleted === 1" class="room-deleted-tag">
                已禁用
              </div>
            </div>
            <div class="room-type">
              房间类型：{{ room.roomType?.roomType || "未设置" }}
            </div>
            <!-- 新增统计信息组容器 -->
            <div class="room-stats-group">
              <div class="room-stats">总床位：{{ room.totalBeds || 0 }}</div>
              <div class="room-stats">已入住：{{ room.occupiedBeds || 0 }}</div>
              <div class="room-stats">
                入住率：{{ room.occupancyRate || 0 }}%
              </div>
            </div>
          </div>
          <div class="room-actions">
            <template v-if="room.isDeleted !== 1">
              <el-button size="small" plain @click="handleEditRoom(room)"
                >编辑</el-button
              >
              <el-button
                size="small"
                plain
                :disabled="(room.bedList && room.bedList.length > 0) || false"
                @click="handleDeleteRoom(room)"
                >删除</el-button
              >
              <el-button size="small" plain @click="handleViewRoom(room)"
                >查看</el-button
              >
              <!-- 修改：新增床位按钮添加床位数量限制判断 -->
              <el-button
                size="small"
                type="primary"
                :disabled="isBedLimitReached(room)"
                @click="handleAddBed(room)"
              >
                {{ isBedLimitReached(room) ? "床位已满" : "新增床位" }}
              </el-button>
            </template>
            <!-- 已删除房间显示开启按钮（默认隐藏，鼠标悬停显示） -->
            <div class="restore-room-btn" v-if="room.isDeleted === 1">
              <el-button
                size="small"
                type="success"
                @click="handleRestoreRoom(room)"
              >
                开启
              </el-button>
            </div>
          </div>
        </div>
        <!-- 床位列表 -->
        <div class="bed-list">
          <div
            v-for="bed in sortBeds(room.bedList || [])"
            :key="bed.id"
            class="bed-item"
            :class="{
              occupied: getDynamicBedStatus(bed) === '已入住',
              leave: getDynamicBedStatus(bed) === '请假中',
              'deleted-bed': bed.isDeleted === 1,
            }"
          >
            <div class="bed-card">
              <div class="bed-icon">
                <svg
                  class="bed-svg"
                  :class="
                    getDynamicBedStatus(bed) === '空闲'
                      ? 'svg-free'
                      : getDynamicBedStatus(bed) === '请假中'
                      ? 'svg-leave'
                      : 'svg-occupied'
                  "
                  viewBox="0 0 64 64"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <circle cx="18" cy="18" r="6" />
                  <rect x="8" y="24" width="48" height="10" rx="2" />
                  <rect x="8" y="34" width="48" height="12" rx="2" />
                  <rect x="8" y="46" width="4" height="10" />
                  <rect x="52" y="46" width="4" height="10" />
                </svg>
              </div>
              <div class="bed-info">
                <div class="bed-number">床位号：{{ bed.bedNo }}</div>
                <!-- 新增：已禁用床位提示 -->
                <div v-if="bed.isDeleted === 1" class="bed-deleted-tag">
                  已禁用
                </div>
                <div class="elder-name">
                  老人姓名：{{ bed.elderly?.name ? bed.elderly.name : "空闲" }}
                </div>
                <!-- 修复：getBedStatusText 传参从 bed.status 改为 bed -->
                <div class="bed-status">
                  状态：{{ getDynamicBedStatus(bed) }}
                </div>
              </div>
            </div>
            <!-- 床位悬浮操作（编辑/删除）- 已移除状态限制 -->
            <div class="bed-hover-actions">
              <template v-if="bed.isDeleted !== 1">
                <div
                  class="action-btn"
                  @click.stop="handleEditBed(bed)"
                  title="编辑"
                >
                  <svg
                    class="action-icon"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                  >
                    <path
                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                    />
                  </svg>
                </div>
                <div
                  class="action-btn"
                  @click.stop="handleDeleteBed(bed)"
                  title="删除"
                  :disabled="!!bed.elderly?.name"
                  :class="{ 'disabled-delete-btn': !!bed.elderly?.name }"
                  :style="{
                    pointerEvents: !!bed.elderly?.name ? 'none' : 'auto',
                  }"
                >
                  <svg
                    class="action-icon"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                  >
                    <path
                      d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1z"
                    />
                  </svg>
                </div>
              </template>
              <!-- 已禁用床位：悬停显示“开启”按钮（新增） -->
              <div
                class="restore-bed-btn"
                v-if="bed.isDeleted === 1"
                @click.stop="handleRestoreBed(bed)"
                title="开启床位"
              >
                <svg class="action-icon" viewBox="0 0 24 24" fill="#4CAF50">
                  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
                </svg>
              </div>
            </div>
          </div>
          <!-- 空床位提示 -->
          <div v-if="!(room.bedList && room.bedList.length)" class="empty-bed">
            当前房间没有安排床位
          </div>
        </div>
      </div>
    </div>
    <!-- 新增楼层弹窗 -->
    <el-dialog
      title="新增楼层"
      v-model="showAddFloorDialog"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addFloorForm"
        :rules="addFloorRules"
        ref="addFloorFormRef"
        label-width="100px"
      >
        <el-form-item label="楼层名称" prop="floorName">
          <el-input
            v-model="addFloorForm.floorName"
            placeholder="请输入楼层名称（如：1楼）"
            maxlength="5"
            show-word-limit
          />
        </el-form-item>
        <el-form-item
          label="排序"
          prop="sortNo"
          help="请选择排序，选择的数跟楼层的第一个数一样"
        >
          <el-input-number v-model="addFloorForm.sortNo" :min="1" :step="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddFloorDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAddFloor">确定</el-button>
      </template>
    </el-dialog>
    <!-- 编辑楼层弹窗 -->
    <el-dialog
      title="编辑楼层"
      v-model="showEditFloorDialog"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="editFloorForm"
        :rules="editFloorRules"
        ref="editFloorFormRef"
        label-width="100px"
      >
        <el-form-item label="楼层名称" prop="floorName">
          <el-input
            v-model="editFloorForm.floorName"
            placeholder="请输入楼层名称"
            maxlength="5"
            show-word-limit
          />
        </el-form-item>
        <el-form-item
          label="排序"
          prop="sortNo"
          help="请选择排序，选择的数跟楼层的第一个数一样"
        >
          <el-input-number v-model="editFloorForm.sortNo" :min="1" :step="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditFloorDialog = false">取消</el-button>
        <el-button
          type="danger"
          :disabled="!isFloorDeletable"
          @click="submitDeleteFloor"
          >删除</el-button
        >
        <el-button type="primary" @click="submitEditFloor">确定</el-button>
      </template>
    </el-dialog>
    <!-- 新增/编辑房间弹窗 -->
    <el-dialog
      :title="isEditRoom ? '编辑房间' : '新增房间'"
      v-model="showAddRoomDialog"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addRoomForm"
        :rules="addRoomRules"
        ref="addRoomFormRef"
        label-width="100px"
      >
        <el-form-item label="房间号" prop="roomNo">
          <el-input
            v-model="addRoomForm.roomNo"
            placeholder="请输入房间号（如：101）"
            maxlength="5"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="房间类型" prop="roomTypeId">
          <el-select
            v-model="addRoomForm.roomTypeId"
            placeholder="请选择房间类型"
            clearable
          >
            <el-option
              v-for="type in roomTypeList"
              :key="type.id"
              :label="type.roomType"
              :value="type.id"
            />
          </el-select>
        </el-form-item>
        <!-- 新增：床位总数表单项 -->
        <el-form-item label="床位总数" prop="totalBeds">
          <el-input-number
            v-model="addRoomForm.totalBeds"
            :min="1"
            :step="1"
            placeholder="请输入床位总数"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sortNo" v-if="!isEditRoom">
          <el-input-number v-model="addRoomForm.sortNo" :min="1" :step="1" />
        </el-form-item>
        <el-form-item label="所属楼层" prop="floorId" v-if="!isEditRoom">
          <el-select
            v-model="addRoomForm.floorId"
            placeholder="请选择楼层"
            clearable
          >
            <el-option
              v-for="floor in floorList"
              :key="floor.id"
              :label="floor.floorName"
              :value="floor.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddRoomDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAddRoom">确定</el-button>
      </template>
    </el-dialog>
    <!-- 房间详情弹窗 -->
    <el-dialog
      title="房间详情"
      v-model="showRoomDetailDialog"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="room-detail">
        <div class="room-detail-header">
          <div class="detail-item">
            房间号：{{ selectedRoom.roomNo || "-" }}
          </div>
          <div class="detail-item">
            房间类型：{{ selectedRoom.roomType?.roomType || "未设置" }}
          </div>
          <div class="detail-item">
            总床位数：{{ selectedRoom.totalBeds || 0 }}
          </div>
          <div class="detail-item">
            入住床位数：{{ selectedRoom.occupiedBeds || 0 }}
          </div>
          <div class="detail-item">
            入住率：{{ selectedRoom.occupancyRate || 0 }}%
          </div>
          <div class="detail-item">
            所属楼层：{{ selectedRoom.floor?.floorName || "未设置" }}
          </div>
        </div>
        <div class="room-detail-table" style="margin-top: 16px">
          <el-table :data="selectedRoom.bedList || []" border size="small">
            <el-table-column
              label="床位号"
              prop="bedNo"
              align="center"
              width="100"
            />
            <el-table-column label="老人姓名" align="center" width="120">
              <template #default="scope">{{
                scope.row.elderly?.name || "空闲"
              }}</template>
            </el-table-column>
            <el-table-column label="老人身份证" align="center" width="180">
              <template #default="scope">{{
                scope.row.elderly?.idCard || "-"
              }}</template>
            </el-table-column>
            <el-table-column label="床位状态" align="center" width="120">
              <!-- 修复：getBedStatusText 传参从 scope.row.status 改为 scope.row -->
              <template #default="scope">{{
                getBedStatusText(scope.row)
              }}</template>
            </el-table-column>
            <el-table-column label="护理等级" align="center" width="140">
              <template #default="scope">
                {{
                  scope.row.elderly?.checkInManagementList?.[0]?.nursingLevel
                    ?.levelName || "-"
                }}
              </template>
            </el-table-column>
            <el-table-column label="入住时间" align="center" width="180">
              <template #default="scope">
                {{
                  scope.row.elderly?.checkInManagementList?.[0]
                    ?.checkInStartTime || "-"
                }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <el-button @click="showRoomDetailDialog = false">关闭</el-button>
      </template>
    </el-dialog>
    <!-- 新增/编辑床位弹窗 -->
    <el-dialog
      :title="isEditBed ? '编辑床位' : '新增床位'"
      v-model="showAddBedDialog"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addBedForm"
        :rules="addBedRules"
        ref="addBedFormRef"
        label-width="100px"
      >
        <el-form-item label="床位号" prop="bedNo">
          <el-input
            v-model="addBedForm.bedNo"
            placeholder="请输入床位号（如：101-1）"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="排序" prop="sortNo" v-if="!isEditBed">
          <el-input-number v-model="addBedForm.sortNo" :min="1" :step="1" />
        </el-form-item>
        <el-form-item label="所属房间" prop="roomId" v-if="!isEditBed">
          <el-select
            v-model="addBedForm.roomId"
            placeholder="请选择房间"
            disabled
          >
            <el-option
              :label="currentRoomForBed.roomNo || '未选择'"
              :value="currentRoomForBed.id || 0"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="床位状态" prop="status" v-if="isEditBed">
          <el-select
            v-model="addBedForm.status"
            placeholder="请选择床位状态"
            clearable
          >
            <el-option label="空闲" value="0" />
            <el-option label="已入住" value="1" />
            <el-option label="请假中" value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddBedDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAddBed">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="RoomManagement">
import { ref, reactive, computed, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
// 导入接口 - 完全符合您的roomManage.js接口命名规范
import {
  // 楼层相关
  listFloor,
  getFloor,
  addFloor,
  updateFloor,
  delFloor,
  listFloorAllRelations,
  getFloorRelationsById,
} from "@/api/le/floor";
import { listRoom, getRoom, delRoom, addRoom, updateRoom } from "@/api/le/room";
import { listBed, getBed, delBed, addBed, updateBed } from "@/api/le/bed";
import { listType } from "@/api/le/type";
import {
  listRequest,
  getRequest,
  delRequest,
  addRequest,
  updateRequest,
} from "@/api/le/request";
const leaveStatusMap = ref(new Map()); // 存储老人ID对应的请假状态
const MAX_FLOOR_COUNT = 8; // 最大楼层数，固定值为8
// -------------------------- 基础数据定义 --------------------------
const floorList = ref([]);
const activeFloor = ref(0);
const roomList = ref([]);
const roomTypeList = ref([]);
// 弹窗状态
const showAddFloorDialog = ref(false);
const showEditFloorDialog = ref(false);
const showAddRoomDialog = ref(false);
const showRoomDetailDialog = ref(false);
const showAddBedDialog = ref(false);
// 编辑标记
const isEditRoom = ref(false);
const isEditBed = ref(false);
// 当前操作的房间
const currentRoomForBed = ref({ id: 0, roomNo: "" });
// 选中的房间（详情用）
const selectedRoom = ref({
  roomNo: "",
  roomType: {},
  totalBeds: 0,
  occupiedBeds: 0,
  occupancyRate: 0,
  floor: {},
  bedList: [],
});
// 楼层删除状态（是否有房间）
const isFloorDeletable = ref(false);
// -------------------------- 表单数据 --------------------------
const addFloorForm = reactive({
  floorName: "",
  sortNo: 1,
  isDeleted: 0,
});
const editFloorForm = reactive({
  id: 0,
  floorName: "",
  sortNo: 1,
});
const addRoomForm = reactive({
  id: 0,
  roomNo: "",
  roomTypeId: null,
  floorId: null,
  sortNo: 1,
  isDeleted: 0,
  totalBeds: 1,
});
const addBedForm = reactive({
  id: 0,
  bedNo: "",
  roomId: 0,
  sortNo: 1,
  status: 0,
  isDeleted: 0,
});
// -------------------------- 先定义校验函数 --------------------------
// 唯一性验证函数（必须在验证规则之前定义）
const validateUniqueFloorName = async (rule, value, callback) => {
  if (!value) {
    callback();
    return;
  }
  try {
    const params = { floorName: value };
    if (showEditFloorDialog.value) params.id = editFloorForm.id;
    const res = await listFloor(params);
    console.log("楼层名称验证响应:", res);
    if (res.code === 200) {
      // 安全地检查数据长度
      const dataLength =
        res.data && Array.isArray(res.data) ? res.data.length : 0;
      if (dataLength > 0) {
        callback(new Error("楼层名称已存在"));
      } else {
        callback();
      }
    } else {
      callback();
    }
  } catch (error) {
    console.error("楼层名称验证错误:", error);
    callback();
  }
};

const validateUniqueBedNo = async (rule, value, callback) => {
  if (!value) {
    callback();
    return;
  }
  try {
    const params = { bedNo: value, roomId: addBedForm.roomId };
    if (isEditBed.value) params.id = addBedForm.id;
    const res = await listBed(params);
    console.log("床位号验证响应:", res);
    if (res.code === 200) {
      const dataLength =
        res.data && Array.isArray(res.data) ? res.data.length : 0;
      if (dataLength > 0) {
        callback(new Error("床位号已存在"));
      } else {
        callback();
      }
    } else {
      callback();
    }
  } catch (error) {
    console.error("床位号验证错误:", error);
    callback();
  }
};
// -------------------------- 再定义表单验证规则 --------------------------
const addFloorRules = reactive({
  floorName: [
    { required: true, message: "请输入楼层名称（如：1楼）", trigger: "blur" },
    { max: 5, message: "楼层名称最多5个字符", trigger: "blur" },
    { validator: validateUniqueFloorName, trigger: "blur" },
  ],
  sortNo: [
    { required: true, message: "请输入排序号（最小1）", trigger: "change" },
    {
      type: "number",
      max: MAX_FLOOR_COUNT,
      message: `排序号不能超过${MAX_FLOOR_COUNT}`,
      trigger: "change",
    },
  ],
});
const editFloorRules = reactive({
  floorName: [
    { required: true, message: "请输入楼层名称", trigger: "blur" },
    { max: 5, message: "楼层名称最多5个字符", trigger: "blur" },
    { validator: validateUniqueFloorName, trigger: "blur" },
  ],
  sortNo: [
    { required: true, message: "请输入排序号", trigger: "change" },
    // 新增：最大值验证
    {
      type: "number",
      max: MAX_FLOOR_COUNT,
      message: `排序号不能超过${MAX_FLOOR_COUNT}`,
      trigger: "change",
    },
  ],
});
const addRoomRules = reactive({
  roomNo: [
    { required: true, message: "请输入房间号（如：101）", trigger: "blur" },
    { max: 5, message: "房间号最多5个字符", trigger: "blur" },
  ],
  // 新增：床位总数校验
  totalBeds: [{ required: true, message: "请输入床位总数", trigger: "change" }],
  roomTypeId: [
    { required: true, message: "请选择房间类型", trigger: "change" },
  ],
  floorId: [{ required: true, message: "请选择所属楼层", trigger: "change" }],
  sortNo: [{ required: true, message: "请输入排序号", trigger: "change" }],
});
const addBedRules = reactive({
  bedNo: [
    { required: true, message: "请输入床位号（如：101-1）", trigger: "blur" },
    { max: 10, message: "床位号最多10个字符", trigger: "blur" },
    { validator: validateUniqueBedNo, trigger: "blur" },
  ],
  sortNo: [{ required: true, message: "请输入排序号", trigger: "change" }],
  status: [
    { required: isEditBed.value, message: "请选择床位状态", trigger: "change" },
  ],
});
// -------------------------- 表单引用 --------------------------
const addFloorFormRef = ref(null);
const editFloorFormRef = ref(null);
const addRoomFormRef = ref(null);
const addBedFormRef = ref(null);
// -------------------------- 计算属性 --------------------------
const filteredRooms = computed(() => {
  return roomList.value.filter((room) => room.floorId === activeFloor.value);
});
// -------------------------- 页面加载初始化 --------------------------
onMounted(async () => {
  try {
    await Promise.all([
      loadFloorList(),
      loadRoomTypeList(),
      loadLeaveStatus(), // 新增：加载请假状态
    ]);
  } catch (error) {
    ElMessage.error("页面初始化失败：" + (error.message || "网络异常"));
  }
});

// 监听楼层变化时也重新加载请假状态
watch(activeFloor, async (newVal) => {
  await Promise.all([
    loadRoomListByFloor(newVal),
    loadLeaveStatus(), // 新增：切换楼层时也更新请假状态
  ]);
});
// -------------------------- 数据加载方法 --------------------------
/** 加载楼层列表 */
const loadFloorList = async () => {
  try {
    const res = await listFloorAllRelations();
    console.log("楼层列表响应:", res);
    if (res.code === 200 && Array.isArray(res.data)) {
      floorList.value = res.data.map((floor) => ({
        ...floor,
        showActions: false, // 默认不显示操作按钮
        hasRooms: floor.roomList && floor.roomList.length > 0, // 判断是否有房间
      }));
      if (floorList.value.length > 0) {
        activeFloor.value = floorList.value[0].id;
        await loadRoomListByFloor(activeFloor.value);
      }
    } else {
      ElMessage.warning("未查询到楼层数据");
    }
  } catch (error) {
    console.error("加载楼层错误:", error);
    ElMessage.error("加载楼层失败：" + (error.message || "接口调用异常"));
  }
};
/** 直接删除楼层（悬停按钮触发） */
const handleDeleteFloorDirect = async (floor) => {
  try {
    // 弹确认框
    await ElMessageBox.confirm(
      `确定删除楼层【${floor.floorName}】吗？删除后该楼层下所有房间将一并删除！`,
      "危险操作",
      { type: "error", draggable: true }
    );
    // 调用删除接口
    const res = await delFloor(floor.id);
    if (res.code === 200) {
      ElMessage.success("删除楼层成功");
      // 重新加载楼层列表，更新状态
      await loadFloorList();
    } else {
      ElMessage.error(res.msg || "删除楼层失败");
    }
  } catch (error) {
    // 取消删除时不提示
    if (error === "cancel") return;
    console.error("删除楼层错误:", error);
    ElMessage.error("删除楼层失败：" + (error.message || "接口异常"));
  }
};
const loadRoomTypeList = async () => {
  try {
    // 传递pageNum=1和足够大的pageSize，获取所有数据
    const res = await listType({
      status: 1,
      pageNum: 1, // 第一页
      pageSize: 1000, // 足够大的每页条数，覆盖所有数据
    });
    console.log("房型列表响应:", res);
    if (res.code === 200 && Array.isArray(res.rows)) {
      roomTypeList.value = res.rows
        .filter((item) => item.status === 1) // 新增状态过滤条件
        .map((item) => ({
          id: item.id,
          roomType: item.roomType, // 已修正的字段映射
        }));
    } else {
      ElMessage.warning("未查询到房型数据");
    }
  } catch (error) {
    console.error("加载房型错误:", error);
    ElMessage.error("加载房型失败：" + (error.message || "接口调用异常"));
  }
};
/** 根据楼层ID加载房间列表 + 计算删除状态 */
const loadRoomListByFloor = async (floorId) => {
  try {
    const res = await getFloorRelationsById(floorId);
    console.log("房间列表响应:", res);
    if (res.code === 200 && res.data) {
      const targetFloor = res.data;
      console.log("目标楼层:", targetFloor);
      const rooms = targetFloor.roomList || [];

      //计算房间的床位统计
      roomList.value = rooms.map((room) => {
        const bedList = room.bedList || [];
        const totalBeds = room.totalBeds || 0; // 从room表的total_beds字段取值

        const occupiedBeds = bedList.filter(
          (bed) =>
            bed.status === 1 ||
            bed.status === 2 ||
            (bed.status === 0 && bed.elderly?.name)
        ).length;
        const occupancyRate =
          totalBeds === 0 ? 0 : Math.round((occupiedBeds / totalBeds) * 100);
        return { ...room, totalBeds, occupiedBeds, occupancyRate };
      });

      // 判断楼层是否可删除（无房间时可删）
      isFloorDeletable.value = rooms.length === 0;
    } else {
      roomList.value = [];
      ElMessage.warning("该楼层未查询到房间数据");
      isFloorDeletable.value = true;
    }
  } catch (error) {
    console.error("加载房间错误:", error);
    roomList.value = [];
    ElMessage.error("加载房间失败：" + (error.message || "接口调用异常"));
    isFloorDeletable.value = true;
  }
};
// 监听楼层变化，重新加载房间和删除状态
watch(activeFloor, async (newVal) => {
  await loadRoomListByFloor(newVal);
});
// 新增：恢复房间（将isDeleted设为0）
const handleRestoreRoom = async (room) => {
  try {
    await ElMessageBox.confirm(
      `确定要开启房间【${room.roomNo}】吗？`,
      "操作确认",
      { type: "info", draggable: true }
    );
    // 创建一个仅包含必要字段的对象
    const updateData = {
      roomNo: room.roomNo, // 确保房间号不为null
      roomTypeId: room.roomTypeId,
      floorId: room.floorId,
      sortNo: room.sortNo,
      totalBeds: room.totalBeds,
      id: room.id,
      isDeleted: 0, // 恢复为未删除状态
    };
    const res = await updateRoom(updateData);
    console.log("恢复房间响应:", res);
    if (res.code === 200) {
      ElMessage.success("房间开启成功");
      await loadRoomListByFloor(activeFloor.value);
    } else {
      ElMessage.error(res.msg || "房间开启失败");
    }
  } catch (error) {
    if (error === "cancel") return;
    console.error("恢复房间错误:", error);
    ElMessage.error("房间开启失败：" + (error.message || "接口异常"));
  }
};
// -------------------------- 新增方法：床位数量限制判断 --------------------------
/**
 * 判断房间的床位数量是否已达到上限
 * 修复：条件改为“实际床位数量 >= 总床位”，而非“已入住人数”s
 */
const isBedLimitReached = (room) => {
  if (!room) return false;

  const occupiedBeds = room.occupiedBeds || 0; // 已入住床位数
  const totalBeds = room.totalBeds || 0; // 房间设置的总床位上限

  // 边界处理：总床位为0时不限制；否则判断已入住床位数是否等于总床位数
  if (totalBeds === 0) return false;
  return occupiedBeds >= totalBeds; // 已入住床位数 >= 总床位数 → 已满
};

// -------------------------- 事件处理方法 --------------------------
/** 切换楼层 */
const handleFloorChange = async (floorId) => {
  if (activeFloor.value === floorId) return;
  activeFloor.value = floorId;
};
/** 新增楼层 */
const handleAddFloor = () => {
  addFloorForm.floorName = "";
  addFloorForm.sortNo = 1;
  addFloorFormRef.value?.clearValidate();
  showAddFloorDialog.value = true;
};
/** 编辑楼层 */
const handleEditFloor = async (floor) => {
  try {
    const res = await getFloor(floor.id);
    console.log("编辑楼层详情响应:", res);
    if (res.code === 200 && res.data) {
      editFloorForm.id = res.data.id;
      editFloorForm.floorName = res.data.floorName;
      editFloorForm.sortNo = res.data.sortNo || 1;
      editFloorFormRef.value?.clearValidate();
      showEditFloorDialog.value = true;
    }
  } catch (error) {
    console.error("获取楼层详情错误:", error);
    ElMessage.error("获取楼层详情失败：" + (error.message || "接口异常"));
  }
};
/** 新增房间（顶部按钮） */
const handleAddRoomGlobal = () => {
  // 检查当前楼层房间数量是否已达上限
  const currentFloorRooms = roomList.value.filter(
    (room) => room.floorId === activeFloor.value
  );
  if (currentFloorRooms.length >= 5) {
    ElMessage.warning("最大房间数为5，不能再增加了");
    return;
  }
  isEditRoom.value = false;
  addRoomForm.id = 0;
  addRoomForm.roomNo = "";
  addRoomForm.roomTypeId = null;
  addRoomForm.floorId = activeFloor.value;
  addRoomForm.sortNo = 1;
  addRoomFormRef.value?.clearValidate();
  showAddRoomDialog.value = true;
};
/** 编辑房间 */
const handleEditRoom = async (room) => {
  try {
    const res = await getRoom(room.id);
    console.log("编辑房间详情响应:", res);
    if (res.code === 200 && res.data) {
      isEditRoom.value = true;
      addRoomForm.id = res.data.id;
      addRoomForm.roomNo = res.data.roomNo;
      addRoomForm.roomTypeId = res.data.roomTypeId;
      addRoomForm.floorId = res.data.floorId;
      addRoomForm.sortNo = res.data.sortNo || 1;
      addRoomForm.totalBeds = res.data.totalBeds || 1;
      addRoomFormRef.value?.clearValidate();
      showAddRoomDialog.value = true;
    }
  } catch (error) {
    console.error("获取房间详情错误:", error);
    ElMessage.error("获取房间详情失败：" + (error.message || "接口异常"));
  }
};
/** 删除房间（校验床位关联） */
const handleDeleteRoom = async (room) => {
  try {
    await ElMessageBox.confirm(
      `确定禁用房间【${room.roomNo}】吗？删除后不可恢复！`,
      "删除确认",
      { type: "warning", draggable: true }
    );
    const res = await delRoom(room.id);
    console.log("删除房间响应:", res);
    if (res.code === 200) {
      ElMessage.success("删除房间成功");
      await loadRoomListByFloor(activeFloor.value);
    } else {
      ElMessage.error(res.msg || "删除房间失败");
    }
  } catch (error) {
    if (error === "cancel") return;
    console.error("删除房间错误:", error);
    ElMessage.error("删除房间失败：" + (error.message || "接口异常"));
  }
};
/** 查看房间详情 */
const handleViewRoom = (room) => {
  selectedRoom.value = JSON.parse(JSON.stringify(room));
  showRoomDetailDialog.value = true;
};
/** 新增床位 - 添加限制检查 */
const handleAddBed = (room) => {
  // 再次检查床位限制（防止在点击时状态发生变化）
  if (isBedLimitReached(room)) {
    ElMessage.warning(
      `房间 ${room.roomNo} 的床位数量已达到上限（${room.totalBeds}个），无法新增床位`
    );
    return;
  }

  isEditBed.value = false;
  currentRoomForBed.value = { id: room.id, roomNo: room.roomNo };
  addBedForm.id = 0;
  addBedForm.bedNo = "";
  addBedForm.roomId = room.id;
  addBedForm.sortNo = 1;
  addBedForm.status = 0;
  addBedFormRef.value?.clearValidate();
  showAddBedDialog.value = true;
};

/** 新增：根据床位状态（含isDeleted）获取图标样式类 */
const getBedSvgClass = (bed) => {
  if (bed.isDeleted === 1) return "svg-disabled"; // 禁用状态图标类
  if (bed.status === 0) return "svg-free";
  if (bed.status === 2) return "svg-leave";
  return "svg-occupied";
};
/** 新增：开启床位（将isDeleted设为0） */
const handleRestoreBed = async (bed) => {
  try {
    // 确认开启弹窗
    await ElMessageBox.confirm(
      `确定要开启床位【${bed.bedNo}】吗？`,
      "操作确认",
      { type: "info", draggable: true }
    );
    // 调用updateBed接口，仅传递必要字段（id和isDeleted）
    const res = await updateBed({
      id: bed.id,
      isDeleted: 0, // 恢复为正常状态
    });
    if (res.code === 200) {
      ElMessage.success(`床位【${bed.bedNo}】开启成功`);
      // 重新加载当前楼层房间数据，刷新床位状态
      await loadRoomListByFloor(activeFloor.value);
    } else {
      ElMessage.error(res.msg || "开启床位失败");
    }
  } catch (error) {
    // 取消操作不提示
    if (error === "cancel") return;
    console.error("开启床位错误:", error);
    ElMessage.error("开启床位失败：" + (error.message || "接口异常"));
  }
};
/** 编辑床位 */
const handleEditBed = async (bed) => {
  try {
    const res = await getBed(bed.id);
    console.log("编辑床位详情响应:", res);
    if (res.code === 200 && res.data) {
      isEditBed.value = true;
      addBedForm.id = res.data.id;
      addBedForm.bedNo = res.data.bedNo;
      addBedForm.roomId = res.data.roomId;
      addBedForm.sortNo = res.data.sortNo || 1;
      addBedForm.status = res.data.status || 0;
      // 回显所属房间
      const room = roomList.value.find((r) => r.id === res.data.roomId);
      if (room) currentRoomForBed.value = { id: room.id, roomNo: room.roomNo };
      addBedFormRef.value?.clearValidate();
      showAddBedDialog.value = true;
    }
  } catch (error) {
    console.error("获取床位详情错误:", error);
    ElMessage.error("获取床位详情失败：" + (error.message || "接口异常"));
  }
};
/** 删除床位（校验老人关联） */
const handleDeleteBed = async (bed) => {
  // 新增：异常数据校验——空闲状态却有老人信息时，提示并终止操作
  if (bed?.status === 0 && bed.elderly?.name) {
    ElMessage.error(
      `床位【${bed.bedNo}】状态异常（空闲却关联老人），请联系管理员处理后再删除`
    );
    return;
  }
  console.log("删除床位请求参数:", bed);
  // 新增：前置判断，有老人信息直接提示并返回，不执行后续逻辑
  if (bed.elderly?.name) {
    ElMessage.warning(`床位【${bed.bedNo}】已关联老人，无法删除`);
    return; // 终止函数，不触发确认弹窗和接口调用
  }
  try {
    await ElMessageBox.confirm(
      `确定删除床位【${bed.bedNo}】吗？删除后不可恢复！`,
      "删除确认",
      { type: "warning", draggable: true }
    );
    const res = await delBed(bed.id);
    console.log("删除床位响应:", res);
    if (res.code === 200) {
      ElMessage.success("删除床位成功");
      await loadRoomListByFloor(activeFloor.value);
    } else {
      ElMessage.error(res.msg || "删除床位失败");
    }
  } catch (error) {
    if (error === "cancel") return;
    console.error("删除床位错误:", error);
    ElMessage.error("删除床位失败：" + (error.message || "接口异常"));
  }
};
// -------------------------- 表单提交方法 --------------------------
/** 提交新增楼层 */
const submitAddFloor = async () => {
  const form = addFloorFormRef.value;
  if (!form) return;
  try {
    await form.validate();
    console.log("提交新增楼层数据:", addFloorForm);
    // 额外检查楼层数限制
    if (addFloorForm.sortNo > MAX_FLOOR_COUNT) {
      ElMessage.error(`增加失败，最大楼层数为${MAX_FLOOR_COUNT}`);
      return;
    }
    const res = await addFloor(addFloorForm);
    console.log("新增楼层响应:", res);
    if (res.code === 200) {
      ElMessage.success("新增楼层成功");
      showAddFloorDialog.value = false;
      await loadFloorList();
    } else {
      ElMessage.error(res.msg || "新增楼层失败");
    }
  } catch (error) {
    // console.error("新增楼层错误:", error);
    // if (error.name !== "Error") return;
    // ElMessage.error("新增楼层失败：" + (error.message || "接口异常"));
  }
};
/** 提交编辑楼层 */
const submitEditFloor = async () => {
  const form = editFloorFormRef.value;
  if (!form) return;
  try {
    await form.validate();
    // 额外检查楼层数限制
    if (editFloorForm.sortNo > MAX_FLOOR_COUNT) {
      ElMessage.error(`修改失败，最大楼层数为${MAX_FLOOR_COUNT}`);
      return;
    }
    console.log("提交编辑楼层数据:", editFloorForm);
    const res = await updateFloor(editFloorForm);
    console.log("编辑楼层响应:", res);
    if (res.code === 200) {
      ElMessage.success("编辑楼层成功");
      showEditFloorDialog.value = false;
      await loadFloorList();
    } else {
      ElMessage.error(res.msg || "编辑楼层失败");
    }
  } catch (error) {
    console.error("编辑楼层错误:", error);
    if (error.name !== "Error") return;
    ElMessage.error("编辑楼层失败：" + (error.message || "接口异常"));
  }
};
/** 提交删除楼层（校验房间关联） */
const submitDeleteFloor = async () => {
  try {
    await ElMessageBox.confirm(
      `确定删除楼层【${editFloorForm.floorName}】吗？会删除该楼层下所有房间！`,
      "危险操作",
      { type: "error", draggable: true }
    );
    const res = await delFloor(editFloorForm.id);
    console.log("删除楼层响应:", res);
    if (res.code === 200) {
      ElMessage.success("删除楼层成功");
      showEditFloorDialog.value = false;
      await loadFloorList();
    } else {
      ElMessage.error(res.msg || "删除楼层失败");
    }
  } catch (error) {
    if (error === "cancel") return;
    console.error("删除楼层错误:", error);
    ElMessage.error("删除楼层失败：" + (error.message || "接口异常"));
  }
};
/** 提交新增/编辑房间 */
const submitAddRoom = async () => {
  const form = addRoomFormRef.value;
  if (!form) return;
  try {
    await form.validate();
    const res = isEditRoom.value
      ? await updateRoom(addRoomForm)
      : await addRoom(addRoomForm);

    if (res.code === 200) {
      ElMessage.success(isEditRoom.value ? "编辑房间成功" : "新增房间成功");
      showAddRoomDialog.value = false;
      await loadRoomListByFloor(activeFloor.value);
    } else {
      // 直接显示后端返回的错误信息（包含房间号重复提示）
      ElMessage.error(
        res.msg || `${isEditRoom.value ? "编辑" : "新增"}房间失败`
      );
    }
  } catch (error) {
    /* if (error.name !== "Error") return; // 忽略表单基础验证错误
    // 显示后端异常信息
    ElMessage.error(
      `${isEditRoom.value ? "编辑" : "新增"}房间失败：${
        error.message || "接口异常"
      }`
    ); */
  }
};
/** 提交新增/编辑床位 */
const submitAddBed = async () => {
  const form = addBedFormRef.value;
  if (!form) return;
  try {
    await form.validate();
    console.log("提交床位数据:", addBedForm);
    const res = isEditBed.value
      ? await updateBed(addBedForm)
      : await addBed(addBedForm);
    console.log("床位操作响应:", res);
    if (res.code === 200) {
      ElMessage.success(isEditBed.value ? "编辑床位成功" : "新增床位成功");
      showAddBedDialog.value = false;
      await loadRoomListByFloor(activeFloor.value);
    } else {
      ElMessage.error(
        res.msg || `${isEditBed.value ? "编辑" : "新增"}床位失败`
      );
    }
  } catch (error) {
    /* console.error("床位操作错误:", error);
    if (error.name !== "Error") return;
    ElMessage.error(
      `${isEditBed.value ? "编辑" : "新增"}床位失败：` +
        (error.message || "接口异常")
    ); */
  }
};
// -------------------------- 工具方法 --------------------------
/** 床位排序（按sortNo升序） */
const sortBeds = (beds) => {
  return [...beds].sort((a, b) => {
    const sa = typeof a.sortNo === "number" ? a.sortNo : 999;
    const sb = typeof b.sortNo === "number" ? b.sortNo : 999;
    return sa - sb;
  });
};
const getBedStatusText = (bed) => {
  // 优先检查禁用状态
  if (bed?.isDeleted === 1) return "已禁用";

  // 数据一致性校验
  if (bed?.status === 0 && bed.elderly?.name) {
    console.warn(
      `数据异常：床位【${bed.bedNo}】状态为空闲，但关联了老人【${bed.elderly.name}】`
    );
    return "已入住";
  }

  switch (bed?.status) {
    case 0:
      return "空闲";
    case 1:
      return "已入住";
    case 2:
      return "请假中";
    default:
      return "未知状态";
  }
};
// -------------------------- 新增：请假状态管理 --------------------------
/**
 * 加载所有请假中的老人状态
 */
const loadLeaveStatus = async () => {
  try {
    // 查询所有请假状态为"请假中"的记录
    const res = await listRequest({
      pageNum: 1,
      pageSize: 1000, // 获取足够多的数据
      leaveStatus: "请假中", // 根据实际接口参数调整
    });

    if (res.code === 200 && Array.isArray(res.rows)) {
      // 清空旧数据
      leaveStatusMap.value.clear();

      // 遍历请假记录，建立老人ID与请假状态的映射
      res.rows.forEach((record) => {
        if (record.elderlyId && record.leaveStatus === "请假中") {
          leaveStatusMap.value.set(record.elderlyId, "请假中");
        }
      });

      console.log("请假状态映射表:", leaveStatusMap.value);
    }
  } catch (error) {
    console.error("加载请假状态失败:", error);
  }
};
/**
 * 根据床位获取动态状态（新增方法）
 * 优先级：请假中 > 床位原有状态
 */
const getDynamicBedStatus = (bed) => {
  // 如果床位有关联老人且该老人在请假中，则返回请假状态
  if (bed.elderly?.id && leaveStatusMap.value.has(bed.elderly.id)) {
    return "请假中";
  }

  // 否则返回床位的原始状态
  return getBedStatusText(bed);
};
</script>
<style scoped>
/* 新增：删除按钮专属禁用样式，优先级高于默认样式 */
.action-btn.disabled-delete-btn {
  opacity: 0.3 !important; /* 更深的置灰效果 */
  cursor: not-allowed !important; /* 强制显示“禁止”鼠标图标 */
  pointer-events: none !important; /* 彻底阻止点击事件，优先级最高 */
}
/* 同步禁用图标的颜色 */
.action-btn.disabled-delete-btn .action-icon {
  color: #999 !important; /* 灰色图标，与禁用状态匹配 */
}
/* 新增：已禁用床位整体样式（置灰+修复hover事件传递） */
.bed-item.deleted-bed {
  opacity: 0.6;
  pointer-events: none !important; /* 强制禁用卡片事件，优先级最高 */
  position: relative; /* 新增：确保子元素绝对定位生效 */
}
/* 2. 床位信息框：允许接收hover事件（关键） */
.bed-item.deleted-bed .bed-card {
  pointer-events: auto !important; /* 让床位框能接收hover，触发按钮显示 */
  cursor: default; /* 保持鼠标样式正常 */
}
/* 新增：已禁用床位的图标样式（灰色） */
.svg-disabled {
  color: #bdbdbd;
}
/* 新增：已禁用提示标签 */
.bed-deleted-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  background-color: #ff4d4f;
  color: white;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
}
/* 新增：开启床位按钮样式（初始隐藏，修复样式冲突） */
.bed-item.deleted-bed .restore-bed-btn {
  display: none !important; /* 初始强制隐藏 */
  pointer-events: auto !important; /* 按钮可点击 */
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important; /* 固定在右上角，不随内容偏移 */
  top: 8px !important;
  right: 8px !important;
  z-index: 999 !important; /* 顶层显示，不被遮挡 */
}
.bed-item.deleted-bed .bed-card:hover ~ .restore-bed-btn,
.bed-item.deleted-bed .restore-bed-btn:hover {
  display: flex !important; /* 悬停床位框 或 按钮本身时都显示 */
}
/* 关键修复：已禁用床位的父容器允许接收hover事件 */
.bed-item.deleted-bed .bed-hover-actions {
  display: block !important; /* 强制显示父容器，突破默认隐藏规则 */
  pointer-events: auto !important; /* 强制启用父容器事件，优先级最高 */
  position: absolute !important;
  top: 4px !important; /* 微调位置，确保不超出卡片 */
  right: 4px !important;
  z-index: 999 !important; /* 提升层级，确保在最顶层显示 */
  background-color: rgba(0, 0, 0, 0.7) !important; /* 加深背景，便于识别 */
  padding: 2px !important;
}
/* 已禁用床位悬停时，先显示父容器再显示按钮 */
.bed-item.deleted-bed:hover .bed-hover-actions {
  display: flex;
}
.bed-item.deleted-bed:hover .restore-bed-btn {
  display: flex !important;
}
/* 开启按钮图标 hover 效果 */
.restore-bed-btn:hover .action-icon {
  fill: #4caf50;
  transform: scale(1.1);
  transition: all 0.2s;
}
/* 隐藏已禁用床位的原操作按钮 */
.bed-item.deleted-bed .action-btn {
  display: none !important;
}
/* 新增样式 */
.room-card.deleted-room {
  opacity: 0.6; /* 置灰效果 */
  background-color: #f5f5f5;
}
.room-number-wrapper .room-deleted-tag {
  margin-left: 8px;
  padding: 2px 6px;
  background-color: #ff4d4f;
  color: white;
  font-size: 12px;
  border-radius: 4px;
}
.room-actions .restore-room-btn {
  display: none; /* 默认隐藏 */
}
.room-card.deleted-room:hover .restore-room-btn {
  display: block; /* 鼠标悬停时显示 */
}
.disabled-bed-list {
  pointer-events: none; /* 禁止床位区域的鼠标事件 */
}
.app-container {
  padding: 20px;
  height: 100vh;
  overflow: auto;
  background-color: #fafafa;
  box-sizing: border-box;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.floor-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.header-actions {
  display: flex;
  gap: 8px;
}
.status-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  color: #666;
  font-size: 12px;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.room-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}
.room-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.room-header {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 行间距 */
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}
.room-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 新增：房间号包装器，用于并排显示房间号和已满标签 */
.room-number-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.room-number {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
/* 修改：已满标签样式 */
.room-full-tag {
  font-size: 10px;
  color: #f56c6c;
  background-color: #fef0f0;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid #fbc4c4;
  font-weight: 500;
  white-space: nowrap;
}
.room-type,
.room-stats {
  font-size: 12px;
  color: #666;
}
/* 新增楼层Tab样式 */
.floor-tabs {
  display: flex;
  margin-bottom: 20px;
  gap: 4px;
}
.floor-tab {
  padding: 8px 24px;
  background-color: #e5e7eb;
  border: none;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  font-size: 14px;
  transition: all 0.2s;
  white-space: nowrap; /* 防止名称换行 */
  transition: all 0.2s;
}
.floor-tab.active {
  background-color: #fff;
  font-weight: bold;
  box-shadow: 0 -2px 0 0 #42b983 inset;
}
/* 新增：统计信息组的行内布局 */
.room-stats-group {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}
/* 保持单个统计项的样式 */
.room-stats {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}
.room-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(60px, 1fr));
  gap: 6px;
  justify-items: start; /* 居左 */
  width: 100%; /* 占满行宽度 */
}
.room-actions :deep(.el-button--small) {
  width: 100%;
  box-sizing: border-box;
  min-width: 60px;
  padding: 2px 6px;
  font-size: 12px;
  height: 24px;
  line-height: 20px;
}
.bed-list {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  gap: 12px;
}
.bed-item {
  position: relative;
}
.bed-card {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  background-color: #fff;
  transition: all 0.2s;
}
.bed-item:hover .bed-card {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
.bed-item.occupied .bed-card {
  background-color: #f0f9eb;
  border-color: #c2e7b0;
}
.bed-item.leave .bed-card {
  background-color: #fef7e0;
  border-color: #ffe58f;
}
.bed-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}
.bed-svg {
  width: 24px;
  height: 24px;
}
.svg-free {
  color: #c0c4cc;
}
.svg-occupied {
  color: #67c23a;
}
.svg-leave {
  color: #e6a23c;
}
.bed-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100% - 48px); /* 预留图标和间距的宽度 */
}
.elder-name {
  white-space: nowrap; /* 文字不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
}
.bed-number,
.elder-name,
.bed-status {
  font-size: 12px;
  color: #666;
}
.bed-number {
  font-weight: 500;
  color: #333;
}
.bed-hover-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  align-items: center;
  gap: 6px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  padding: 4px;
  z-index: 10;
}
.bed-item:hover .bed-hover-actions {
  display: flex;
}
.action-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.action-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.action-icon {
  width: 16px;
  height: 16px;
  color: #fff;
}
.empty-bed {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 0;
  color: #999;
  font-size: 12px;
  border: 1px dashed #ebeef5;
  border-radius: 6px;
  background-color: #fafafa;
}
.room-detail {
  padding: 8px 0;
}
.room-detail-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}
.detail-item {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}
.detail-item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #409eff;
}
.room-detail-table .el-table {
  font-size: 12px;
}
.room-detail-table .el-table__header th {
  background-color: #f5f7fa;
  font-weight: 500;
}
/* 楼层操作按钮容器 */
.floor-action-btns {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px; /* 新增：与楼层名称保持间距 */
}
@media (max-width: 768px) {
  .floor-action-btns {
    gap: 2px;
  }
  .floor-tab .el-button--mini {
    padding: 2px 6px;
    font-size: 11px;
  }
  .room-grid {
    grid-template-columns: 1fr;
  }
  .bed-list {
    grid-template-columns: 1fr;
  }
  .status-legend {
    gap: 12px;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
